{% extends "zato/index.html" %}

{% block html_title %}IMAP{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.alerts.css">
{% endblock %}

{% block "extra_js" %}

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.tablesorter.min.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.alerts.min.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/email/imap.js"></script>

    <script nonce="{{ CSP_NONCE }}">
    $.fn.zato.data_table.get_columns = function() {
        return [

            // 1
            '_numbering',
            '_selection',
            'name',

            // 2
            '_is_active',
            '_server_type',
            '_host',

            // 3
            '_port',
            '_username',
            '_change_password,',

            // 4
            '_edit',
            '_delete',
            '_ping',

            // 5
            'id',
            'is_active',
            'timeout',

            // 6
            'debug_level',
            'mode',
            'get_criteria',

            // 7
            'username',
            'server_type',
            'tenant_id',

            // 8
            'client_id',
            'host',
            'port',
        ]
    }
    </script>

{% endblock %}

{% block "content" %}
<h2 class="zato">IMAP</h2>

{% if not zato_clusters %}
    {% include "zato/no-clusters.html" %}
{% else %}

    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

{% include "zato/search-form.html" with page_prompt="Show connections"%}


    {% if cluster_id %}

        <div class='page_prompt' style="clear:left">
            <a href="javascript:$.fn.zato.email.imap.create()">Create a new IMAP connection</a>
        </div>

        <div id="markup">
            <table id="data-table">
                <thead>
                    <tr class='ignore'>

                        {% comment %} 1 {% endcomment %}
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th><a href="#">Name</a></th>

                        {% comment %} 2 {% endcomment %}
                        <th><a href="#">Active</a></th>
                        <th><a href="#">Type</a></th>
                        <th><a href="#">Host / Tenant ID</a></th>

                        {% comment %} 3 {% endcomment %}
                        <th><a href="#">Port</a></th>
                        <th><a href="#">User / e-mail</a></th>
                        <th>&nbsp;</th>

                        {% comment %} 4 {% endcomment %}
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>

                        {% comment %} 5 {% endcomment %}
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        {% comment %} 6 {% endcomment %}
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        {% comment %} 7 {% endcomment %}
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        {% comment %} 8 {% endcomment %}
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                </thead>

                <tbody>
                {% if items %}
                {% for item in items %}
                    <tr class="{% cycle 'odd' 'even' %}" id='tr_{{ item.id }}'>

                        {% comment %} 1 {% endcomment %}
                        <td class='numbering'>&nbsp;</td>
                        <td class="impexp"><input type="checkbox" /></td>
                        <td>{{ item.name }}</td>

                        {% comment %} 2 {% endcomment %}
                        <td>{{ item.is_active|yesno:'Yes,No' }}</td>
                        <td>{{ item.server_type_human }}</td>
                        <td>
                            {% if item.server_type == "microsoft-365" %}
                                {{ item.tenant_id|default:"<span class='form_hint'>---</span>" }}
                            {% else %}
                                {{ item.host|default:"<span class='form_hint'>---</span>" }}
                            {% endif %}
                        </td>

                        {% comment %} 3 {% endcomment %}
                        <td>
                            {% if item.server_type == "generic-imap" %}
                                {{ item.port }}
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>
                        <td>{{ item.username|default:"<span class='form_hint'>(None)</span>" }}</td>
                        <td>
                            {% if item.server_type == "microsoft-365" %}
                                <a href="javascript:$.fn.zato.data_table.change_password('{{ item.id }}', 'Change secret', 'Secret', 'secret')">Change secret</a>
                            {% else %}
                                <a href="javascript:$.fn.zato.data_table.change_password('{{ item.id }}')">Change password</a>
                            {% endif %}
                        </td>

                        {% comment %} 4 {% endcomment %}
                        <td><a href="javascript:$.fn.zato.email.imap.edit('{{ item.id }}')">Edit</a></td>
                        <td><a href="javascript:$.fn.zato.email.imap.delete_('{{ item.id }}')">Delete</a></td>
                        <td><a href="javascript:$.fn.zato.data_table.ping('{{ item.id }}')">Ping</a></td>

                        {% comment %} 5 {% endcomment %}
                        <td class='ignore item_id_{{ item.id }}'>{{ item.id }}</td>
                        <td class='ignore'>{{ item.is_active }}</td>
                        <td class='ignore'>{{ item.timeout }}</td>

                        {% comment %} 6 {% endcomment %}
                        <td class='ignore'>{{ item.debug_level }}</td>
                        <td class='ignore'>{{ item.mode }}</td>
                        <td class='ignore'>{{ item.get_criteria }}</td>

                        {% comment %} 7 {% endcomment %}
                        <td class='ignore'>{{ item.username|default:"" }}</td>
                        <td class='ignore'>{{ item.server_type }}</td>
                        <td class='ignore'>{{ item.tenant_id|default:"" }}</td>

                        {% comment %} 8 {% endcomment %}
                        <td class='ignore'>{{ item.client_id|default:"" }}</td>
                        <td class='ignore'>{{ item.host|default:"" }}</td>
                        <td class='ignore'>{{ item.port|default:"993" }}</td>
                    </tr>
                {% endfor %}
                {% else %}
                    <tr class='ignore'>
                        <td colspan='8'>No results</td>
                    </tr>
                {% endif %}

                </tbody>
            </table>
        </div>

{% include "zato/paginate/action-panel.html" %}

        <div id="create-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "email-imap-create" %}" method="post" id="create-form">
                    <table class="form-data">
                        <tr>
                            <td style="vertical-align:middle; width:19%">
                            <label for="id_name">Name</label>
                            </td>
                            <td>{{ create_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            </td>
                            <td>
                            <label>
                                Active
                                {{ create_form.is_active }}
                            </label>
                            |
                            <label>
                                Server type
                                {{ create_form.server_type }}
                            </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            <label for="id_username">User / e-mail</label>
                            </td>
                            <td>{{ create_form.username }} </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            Generic IMAP
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.generic-imap-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_host">Host</label>
                            </td>
                            <td>{{ create_form.host }} </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            </td>
                            <td>
                                <label>
                                    Port
                                    {{ create_form.port }}
                                </label>
                                |
                                <label>
                                    Mode
                                    {{ create_form.mode }}
                                </label>
                                |
                                <label>
                                    Timeout
                                    {{ create_form.timeout }}
                                </label>
                                |
                                <label>
                                    Debug level
                                    <span class="form_hint">(0-2)</span>
                                    {{ create_form.debug_level }}
                                </label>
                            </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_get_criteria">Get criteria
                            <br/>
                            <span class="form_hint">(Def.: {{ default_get_criteria }})</span>
                            </label>
                            <td>{{ create_form.get_criteria }} </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            Microsoft 365
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.microsoft-365-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_client_id">Tenant ID</label>
                            </td>
                            <td>{{ create_form.tenant_id }} </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_client_id">Client ID</label>
                            </td>
                            <td>{{ create_form.client_id }} </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_filter_criteria">Filter
                            <br/>
                            <span class="form_hint">(Def.: {{ default_filter_criteria }})</span>
                            </label>
                            <td>{{ create_form.filter_criteria }} </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" id="cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                </form>
            </div>
        </div>

        <div id="edit-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "email-imap-edit" %}" method="post" id="edit-form">
                    <table class="form-data">
                        <tr>
                            <td style="vertical-align:middle; width:19%">
                            <label for="id_name">Name</label>
                            </td>
                            <td>{{ edit_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            </td>
                            <td>
                            <label>
                                Active
                                {{ edit_form.is_active }}
                            </label>
                            |
                            <label>
                                Server type
                                {{ edit_form.server_type }}
                            </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            <label for="id_username">User / e-mail</label>
                            </td>
                            <td>{{ edit_form.username }} </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            Generic IMAP
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.generic-imap-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_host">Host</label>
                            </td>
                            <td>{{ edit_form.host }} </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            </td>
                            <td>
                                <label>
                                    Port
                                    {{ edit_form.port }}
                                </label>
                                |
                                <label>
                                    Mode
                                    {{ edit_form.mode }}
                                </label>
                                |
                                <label>
                                    Timeout
                                    {{ edit_form.timeout }}
                                </label>
                                |
                                <label>
                                    Debug level
                                    <span class="form_hint">(0-2)</span>
                                    {{ edit_form.debug_level }}
                                </label>
                            </td>
                        </tr>
                        <tr class="generic-imap-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_get_criteria">Get criteria
                            <br/>
                            <span class="form_hint">(Def.: {{ default_get_criteria }})</span>
                            </label>
                            <td>{{ edit_form.get_criteria }} </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            Microsoft 365
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.microsoft-365-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_client_id">Tenant ID</label>
                            </td>
                            <td>{{ edit_form.tenant_id }} </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_client_id">Client ID</label>
                            </td>
                            <td>{{ edit_form.client_id }} </td>
                        </tr>
                        <tr class="microsoft-365-options-block hidden">
                            <td style="vertical-align:middle">
                            <label for="id_filter_criteria">Filter
                            <br/>
                            <span class="form_hint">(Def.: {{ default_filter_criteria }})</span>
                            </label>
                            <td>{{ edit_form.filter_criteria }} </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" id="id_edit-cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                    <input type="hidden" id="id_edit-id" name="id" />
                </form>
            </div>
        </div>

        <div id="change_password-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "email-imap-change-password" %}" method="post" id="change_password-form">
                    <table class="form-data">
                        <tr>
                            <td style="vertical-align:middle; width:19%">Name</td>
                            <td id="change-password-name"></td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><span id="secret_label1">Password</span></td>
                            <td>{{ change_password_form.password1 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">Confirm <span id="secret_label2">password</span></td>
                            <td>{{ change_password_form.password2 }}
                                <input type="hidden" id="secret_type_id" name="secret_type" />
                                <input type="hidden" id="id_change_password-id" name="id" />
                                <input type="hidden" id="id_change_password-cluster_id" name="cluster_id" value='{{ cluster_id}}' />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

    {% endif %} {% comment %}cluster_id{% endcomment %}

{% endif %}{% comment %}not zato_clusters{% endcomment %}

{% endblock %}
